<template>
  <el-card>
    <el-row>
      <el-form :inline="true" :model="queryVo" size="default">
        <el-form-item label="图书名称">
          <el-input v-model="queryVo.bookName" placeholder="请输入图书名称"/>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="queryVo.bookAuthro" placeholder="请输入作者"/>
        </el-form-item>
        <el-form-item label="ISBN">
          <el-input v-model="queryVo.bookIsbn" placeholder="请输入ISBN"/>
        </el-form-item>
        <el-form-item label="出版社">
          <el-input v-model="queryVo.bookCbs" placeholder="请输入出版社"/>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getList" v-auth="'auth-book-query'">查询</el-button>
          <el-button size="small" type="default" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item/>
      </el-form>
    </el-row>

    <el-row>
      <el-button size="small" type="success" @click="btnAdd" v-auth="'auth-book-add'">
        <el-icon>
          <ele-FolderAdd/>
        </el-icon>
        添加
      </el-button>
      <el-button size="small" type="primary" :disabled="select.sign" @click="selectUpdateBtn"
                 v-auth="'auth-book-update'">
        <el-icon>
          <ele-EditPen/>
        </el-icon>
        修改
      </el-button>
      <el-popconfirm title="确定删除吗？" @confirm="selectDelete">
        <template #reference>
          <el-button size="small" type="danger" :disabled="select.nodes.length<=0" v-auth="'auth-book-delete'">
            <el-icon>
              <ele-Delete/>
            </el-icon>
            删除
          </el-button>
        </template>
      </el-popconfirm>
    </el-row>
    <el-row class="mt10">
      <el-table :data="bookList"
                v-loading="loding"
                @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="bookId" label="编号" align="center"/>
        <el-table-column show-overflow-tooltip prop="bookName" label="图书名称" align="center"/>
        <el-table-column show-overflow-tooltip prop="bookAuthro" label="作者" align="center"/>
        <el-table-column prop="bookIsbn" label="ISBN" align="center"/>
        <el-table-column prop="createByStr" label="数据拥有者" align="center"/>
        <el-table-column align="center" label="操作" v-auths="['auth-book-update','auth-book-delete']">
          <template #default="scope">
            <el-link type="primary" title="修改" @click="signUpdateBtn(scope.row)" v-auth="'auth-book-update'">
              <el-icon>
                <ele-EditPen/>
              </el-icon>
            </el-link>
            <el-popconfirm title="确定删除吗？" @confirm="deleteRows(scope.row)">
              <template #reference>
                <el-link title="删除" type="danger" class="ml10" v-auth="'auth-book-delete'">
                  <el-icon>
                    <ele-Delete/>
                  </el-icon>
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          class="mt15"
          style="justify-content: flex-end;"
          v-model:currentPage="queryVo.current"
          v-model:page-size="queryVo.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          small
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
      />
    </el-row>
    <edit-form ref="editFormRef" @ok="getList()"/>
  </el-card>
</template>

<script setup>
import {queryList, delByIds} from "/@/api/auth/book";
import EditForm from './EditForm.vue'
import {ElMessage} from "element-plus";

const queryVo = reactive({
  current: 1,
  pageSize: 10,
  bookName: undefined,
  bookAuthro: undefined,
  bookCbs: undefined,
  bookIsbn: undefined,
})
const bookList = ref([])
const loding = ref(true)
const total = ref(0)
const editFormRef = ref()
const select = reactive({
  nodes: [],
  sign: true
})
const resetQuery = () => {
  queryVo.bookName = undefined
  queryVo.bookAuthro = undefined
  queryVo.bookCbs = undefined
  queryVo.bookIsbn = undefined
  getList()
}
const btnAdd = () => {
  editFormRef.value.open()
}
const selectUpdateBtn = () => {
  const node = select.nodes[0]
  editFormRef.value.open(node)
}
const selectDelete = () => {
  let arr = []
  select.nodes.forEach(v => {
    arr.push(v.bookId)
  })
  delBook(arr)
}
const handleSelectionChange = (val) => {
  select.nodes = val
  if (select.nodes.length === 1)
    select.sign = false
  else
    select.sign = true
}
const deleteRows = (node) => {
  const arr = [node.bookId]
  delBook(arr)
}
const delBook = async (arr) => {
  await delByIds(arr).then(res => {
    ElMessage.success(res.msg)
    getList()
  })
}
const signUpdateBtn = (node) => {
  editFormRef.value.open(node)
}
const getList = async () => {
  loding.value = true
  await queryList(queryVo).then(res => {
    bookList.value = res.data.rows
    total.value = res.data.pageTotal
    loding.value = false
  })
}
onBeforeMount(() => {
  getList()
})
</script>

<style scoped>

</style>